<template>
  <div id="aboutUs">
    <el-scrollbar>
      <main-header />

      <div id="cover">
        <el-carousel style="height:800px"
                     :autoplay="true"
                     :interval="4000"
                     :arrow="'never'">
          <el-carousel-item v-for="(cover, index) in covers"
                            :key="index"
                            style="height:800px">
            <img :src="cover"
                 width="100%">

          </el-carousel-item>
        </el-carousel>
        <div id="title">
          <span style="font-size:70px;">知道</span>
        </div>
        <div id="description1">
          开源的知识学习社区
        </div>
        <div id="description2">
          规范化的学习路线总结
        </div>
        <div id="telescope">
          <img src="../assets/telescope2.jpg"
               width="100%">
        </div>
      </div>
      <div style="display:flex;align-items:center;font-weight: 600; margin-bottom: 40px; margin-top: 40px; padding-left: 50px;">
        <div style="font-size:50px">
          <a-icon type="team" />
        </div>
        <div>
          <div style="font-size:30px;font-family:Times New Roman;">
            &nbsp;&nbsp;Who Are We?
          </div>
          <div style="font-size:20px;font-family:Times New Roman;">
            &nbsp;&nbsp;&nbsp;&nbsp;我们是谁
          </div>
        </div>
      </div>
      <div id="team">
        <!-- <img src="../assets/hexagon2.jpg"
             height="600px"
             object-fit="cover"
             style="position: absolute;"> -->
        <div id="col1">
          <div id="GuoChen"
               class="creator">
            <a href="https://www.blogkken.cc/">
              <div style="
               background:
               rgba(0,0,0,0.5);
               height:100%;width:100%;position:relative;">
                <div style="position:absolute; bottom: 10%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  郭晨
                </div>
                <div style="position:absolute; bottom: 2%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  KkenGuo
                </div>
              </div>
            </a>
          </div>
          <div id="Dingzr"
               class="creator">
            <a href="https://dingzr2001.github.io/">
              <div style="background: rgba(0,0,0,0.5); height:100%;width:100%;position:relative;">
                <div style="position:absolute; bottom: 10%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  丁兆睿
                </div>
                <div style="position:absolute; bottom: 2%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  Dingzr
                </div>
              </div>
            </a>
          </div>
        </div>
        <div id="col1">
          <div id="Louzy"
               class="creator">
            <a href="https://gitee.com/lou-zhiyuan">
              <div style="background: rgba(0,0,0,0.5); height:100%;width:100%;position:relative;">
                <div style="position:absolute; bottom: 10%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  娄志远
                </div>
                <div style="position:absolute; bottom: 2%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  Victor L
                </div>
              </div>
            </a>
          </div>
          <div id="Limy"
               class="creator">
            <a href="https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click">

              <div style="background: rgba(0,0,0,0.5); height:100%;width:100%;position:relative;">
                <div style="position:absolute; bottom: 10%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  李孟阳
                </div>
                <div style="position:absolute; bottom: 2%;right:5%;color:white;font-size: 20px;font-weight:600;">
                  Chaiyu
                </div>
              </div>
            </a>
          </div>
        </div>
        <div id="col3">
          <div style="font-size: 50px;font-weight:700; color:white;">
            开发者团队 Developers
          </div>
          <div style="font-size: 45px;font-weight:600; color:#FFDC35;">
            <i>TEAM 121</i>
          </div>
          <div style="font-size: 30px;font-weight:600; color:white;">
            我们的仓库：<a href="https://gitee.com/HUSTEasteleven121/software-engineering"><img src="https://gitee.com/static/images/logo.svg?t=158106664"
                   height="30px;"></a>
          </div>
        </div>
      </div>
      <div style="
               display:flex;align-items:center;font-size:30px;
               font-weight:600;
               margin-bottom:40px;
               margin-top:40px;
               padding-left:50px;">
        <div style="font-size:50px;">
          <a-icon type="home" />
        </div>
        <div style="width:60%;">
          <div style=" font-family:Times New Roman;">
            &nbsp;&nbsp;Where Are We From?
          </div>
          <div style="font-size:20px;font-family:Times New Roman;">
            &nbsp;&nbsp;&nbsp;&nbsp;我们来自哪里
          </div>
        </div>
        <div style="width:15%"><img src="../assets/hustLogo.jpeg"
               height="80px"></div>
        <div style="width:15%; margin-left:3%;"><img src="../assets/schoolLogo.png"
               height="80px"></div>
      </div>
      <div id="school">

        <div style="display: flex;background: rgba(0, 0, 0, 0.5); width:100%; height: 100%;padding: 0px 50px 50px 50px; vertical-align:middle;">
          <div style="width: 50%; color: white; font-size: 50px; line-height: 50px;vertical-align:middle;">
            <div style="margin-top: 50px;">
              <el-link :underline="false"
                       href="https://www.hust.edu.cn/"
                       style="font-size: 50px;font-weight: 550;color:white;font-family:SimHei">华中科技大学</el-link>
            </div>
            <div style="font-size: 30px;margin-top:20px;">
              <el-link :underline="false"
                       href="http://cs.hust.edu.cn/"
                       style="font-size: 30px;font-weight: 800;color:white;">计算机科学与技术学院</el-link>
            </div>
            <div style="font-size: 30px;margin-top:20px;font-weight: 600;color:	#BEBEBE;">
              School of Computer Science & Technology, HUST
            </div>
          </div>
          <div style="width:50%;vertical-align:middle;border:5px solid white;">
            <img src="../assets/hustCSbuilding.jpg"
                 width="100%">
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import MainHeader from '@/components/MainHeader.vue'
export default {
  components: { MainHeader },
  data() {
    return {
      covers: [
        'https://cdn.pixabay.com/photo/2018/11/16/07/32/cosmos-3818894_1280.jpg',
        'https://cdn.pixabay.com/photo/2018/11/02/20/49/steampunk-3791039_1280.jpg',
        'https://cdn.pixabay.com/photo/2017/06/19/17/12/books-2420232_1280.jpg',
      ],
    }
  },
}
</script>

<style scoped>
.main-header {
  background: rgba(255, 255, 255, 0);
}
#aboutUs {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
}
#cover {
  background-size: 100% 100%;
  height: 800px;
  background-repeat: no-repeat;
  position: relative;
}
#title {
  position: absolute;
  z-index: 9999;
  font-size: 50px;
  font-weight: 600;
  color: white;
  left: 10%;
  top: 10%;
  font-family: YouYuan;
  animation: showChar 2s 1;
  animation: dropTitle cubic-bezier(1, 0, 0.45, 1.4) 0.7s 1;
}
@keyframes dropTitle {
  from {
    margin-top: -50px;
  }
  to {
    margin-top: 0px;
  }
}

#description1 {
  position: absolute;
  z-index: 9999;
  left: 10%;
  top: 250px;
  font-size: 30px;
  font-weight: 600;
  color: #e0e0e0;
  animation: showChar 5s 1;
  animation: dropDescription1 cubic-bezier(1, 0, 0.45, 1.4) 1.4s 1;
}
@keyframes dropDescription1 {
  0% {
    top: 200px;
    opacity: 0;
  }
  50% {
    top: 200px;
    opacity: 0;
  }
  100% {
    top: 250px;
    opacity: 1;
  }
}
#description2 {
  position: absolute;
  z-index: 9999;
  top: 310px;
  left: 10%;
  font-size: 30px;
  font-weight: 600;
  color: #e0e0e0;
  animation: dropDescription2 cubic-bezier(1, 0, 0.45, 1.4) 2.1s 1;
}
@keyframes dropDescription2 {
  0% {
    top: 260px;
    opacity: 0;
  }
  50% {
    top: 260px;
    opacity: 0;
  }
  100% {
    top: 310px;
    opacity: 1;
  }
}
#telescope {
  position: absolute;
  z-index: 9999;
  width: 20%;
  right: 5%;
  bottom: 10%;
}

#school {
  width: 100%;
  background-image: url('../assets/hust.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
}

#team {
  display: flex;
  position: relative;
  height: 600px;
  background-image: url('../assets/hexagon2.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#col1 {
  height: 100%;
  width: 20%;
}
.creator {
  width: 100%;
  height: 50%;
  /* border: 2px solid white; */
  background-size: 100% 100%;
  transition: all 0.5s;
}
#GuoChen {
  background-image: url('../assets/avatarGuo.jpg');
}
.creator:hover {
  cursor: pointer;
  border: 5px solid white;
}
#Dingzr {
  background-image: url('../assets/avatarDing.jpg');
}
#Louzy {
  background-image: url('../assets/avatarLou.jpg');
}
#Limy {
  background-image: url('../assets/avatarLi.jpg');
}
#col3 {
  height: 100%;
  width: 60%;
  padding: 100px;
}
.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: auto;
}
</style>